Constraints in Figma are powerful layout rules that control how layers behave when their parent frame or container is resized. They help designers create responsive and adaptable interfaces by defining how an element should remain positioned, stretched, or resized relative to its parent.
Constraints are especially useful when designing responsive websites, mobile applications, dashboards, cards, navigation bars, forms, and other UI components. They help maintain consistent layouts across different screen sizes without manually repositioning every element.
Learn more about professional Figma UI/UX training through JustAcademy Figma Training and explore the course through Register for Figma Course Demo.
Constraints are settings that define how a layer should respond when its parent frame changes size. They establish a relationship between the selected layer and the edges or dimensions of its parent container.
For example, if a button is constrained to the right and bottom edges of a frame, resizing the frame will keep the button positioned relative to those edges.
Parent Frame
+--------------------------------------+
| |
| [ Button ] |
| |
+--------------------------------------+
Right + Bottom Constraint
Constraints are important because modern interfaces must work across different screen sizes and devices. A design created only for one fixed frame may break when the frame becomes wider, narrower, taller, or shorter.
Constraints can be used for many UI elements and layouts.
Constraints work based on the relationship between a child layer and its parent frame. The parent provides the boundaries against which the child's position or size is calculated.
Parent Frame
|
+-- Header
|
+-- Logo
|
+-- Navigation
|
+-- Button
|
+-- Content
If the parent frame changes size, the constraint settings determine what happens to its child layers.
To use constraints, select a layer that is inside a frame and look at the right-side Design panel. The Constraints section allows you to define the horizontal and vertical behavior of the selected layer.
Horizontal constraints control how a layer behaves when the width of its parent changes.
Common horizontal options include:
Vertical constraints control how a layer behaves when the height of its parent changes.
Common vertical options include:
The Left constraint keeps the selected layer attached to the left edge of its parent frame.
Before Resize
+----------------------------+
| [Logo] |
| |
+----------------------------+
After Resize
+----------------------------------------+
| [Logo] |
| |
+----------------------------------------+
Left position remains consistent
This is useful for logos, left-aligned navigation items, and content that should maintain a fixed distance from the left edge.
The Right constraint keeps the selected layer attached to the right edge of its parent.
+----------------------------------------+
| [Button] |
+----------------------------------------+
When the parent becomes wider, the button remains aligned with the right side.
Left and Right constraints allow an element to maintain its distance from both the left and right edges of its parent. This can cause the element to stretch horizontally when the parent width changes.
+--------------------------------------+
| [----------- Input Field -----------]|
+--------------------------------------+
Left + Right
This is useful for search bars, input fields, containers, dividers, and full-width content areas.
The Center constraint keeps an element centered relative to its parent.
+--------------------------------------+
| |
| [ Button ] |
| |
+--------------------------------------+
When the parent frame becomes wider or narrower, the element remains centered.
The Scale constraint allows an element to maintain its proportional position and size relative to the parent when the parent is resized.
Scale can be useful for graphics, illustrations, visual compositions, and designs where proportional resizing is required.
The Top constraint keeps the layer attached to the top edge of the parent.
+--------------------------------+
| [Header] |
| |
| |
+--------------------------------+
This is commonly used for headers, titles, logos, and top navigation elements.
The Bottom constraint keeps the layer attached to the bottom edge of the parent frame.
It is useful for bottom navigation, footer buttons, floating actions, and bottom-aligned controls.
Top and Bottom constraints maintain the distance of an element from both the top and bottom edges of its parent. Depending on the layer type and layout, this can allow vertical stretching.
+----------------------------+
| |
| [ ]|
| [ Content ]|
| [ ]|
| |
+----------------------------+
Top + Bottom
The Center option on the vertical axis keeps the element vertically centered within its parent.
+----------------------------+
| |
| |
| [ Element ] |
| |
| |
+----------------------------+
Constraints can be applied independently on both axes. A layer can therefore have one horizontal rule and one vertical rule.
| Horizontal | Vertical | Typical Use |
|---|---|---|
| Left | Top | Logo or top-left content |
| Right | Top | Top-right button |
| Center | Center | Centered modal or message |
| Left & Right | Top | Full-width header content |
| Right | Bottom | Floating action button |
| Left & Right | Top & Bottom | Flexible content area |
A fixed position may work for a single frame size, but constraints define how an element should behave when its parent changes.
| Fixed Position | Constraints |
|---|---|
| Works well for static designs | Works better for responsive layouts |
| Position may break after resizing | Position adapts to parent changes |
| Requires more manual adjustment | Reduces manual adjustment |
| Less flexible | More flexible |
Constraints are one of the important tools for creating responsive designs in Figma. They allow elements to maintain logical relationships with their containers as screen sizes change.
Desktop
+------------------------------------------------+
| Logo Navigation Login |
+------------------------------------------------+
Tablet
+----------------------------------+
| Logo Navigation Login |
+----------------------------------+
Mobile
+----------------------+
| Logo ☰ |
+----------------------+
Constraints help preserve these relationships, while Auto Layout and responsive components can handle more advanced adaptive behavior.
Consider a website header containing a logo on the left, navigation in the center, and a login button on the right.
When the parent header becomes wider, the elements maintain their intended relationships.
A button can be attached to the right side of a card or container.
Card
+----------------------------------+
| Product Name |
| Product Description |
| |
| [Buy Now] |
+----------------------------------+
Use Right and Bottom constraints when the button should remain near the bottom-right corner.
A logo usually needs to maintain a fixed relationship with the left and top edges of a header.
Recommended setup:
Navigation elements can be positioned relative to the center or right side of the header depending on the design structure.
For a centered navigation system, use a Center constraint where appropriate. For right-aligned navigation, use a Right constraint.
Images often require careful constraint settings because their proportions and visual position should remain consistent.
Cards can contain multiple layers such as images, titles, descriptions, prices, and buttons. Constraints can help position these layers relative to the card.
+------------------------------+
| Product Image |
|------------------------------|
| Product Name |
| Product Description |
| ₹1,999 [Buy] |
+------------------------------+
Forms frequently need responsive behavior. Input fields can use Left and Right constraints to stretch with the form container.
+--------------------------------+
| Email |
| [____________________________] |
| Password |
| [____________________________] |
| [Login] |
+--------------------------------+
This allows the form fields to adapt when the parent frame changes width.
A search bar can be constrained to the left and right edges of a toolbar or content area.
This helps maintain a consistent width relationship when the parent container is resized.
A sidebar can use Left and Top constraints to stay attached to the left side of the application frame.
A right-side panel can use Right and Top constraints to remain attached to the right side.
Mobile applications often have bottom navigation bars. A bottom navigation container can be positioned using Bottom constraints so it remains attached to the bottom of the screen.
+----------------------+
| |
| Content |
| |
|----------------------|
| Home Search Profile |
+----------------------+
Bottom
A Floating Action Button or FAB is commonly placed near the bottom-right corner of a mobile screen.
Recommended constraint:
Modal dialogs are often centered horizontally and vertically within the parent frame.
+----------------------------------+
| |
| +--------------+ |
| | Modal | |
| | | |
| +--------------+ |
| |
+----------------------------------+
Center + Center
Footer content can be attached to the bottom of a page or container. Bottom constraints help keep important actions or information aligned with the lower edge.
Constraints are primarily meaningful when layers exist inside a parent frame or container. The frame establishes the coordinate and boundary system against which the child layer responds.
Always understand the parent-child relationship before configuring constraints.
Groups can contain multiple layers, but frames are generally more useful for responsive layout control because frames provide stronger layout and design-management capabilities.
When building responsive interfaces, prefer structured frames and Auto Layout where appropriate.
Constraints and Auto Layout solve related but different layout problems. Constraints describe how a layer relates to its parent when the parent changes size, while Auto Layout controls how layers are arranged, spaced, aligned, and resized within a layout.
| Constraints | Auto Layout |
|---|---|
| Controls relationship to parent | Controls arrangement of children |
| Useful for positioning | Useful for dynamic layout |
| Works on horizontal and vertical axes | Uses horizontal or vertical flow |
| Helpful for responsive positioning | Helpful for responsive content sizing |
When Auto Layout is used, Hug contents allows a container to resize according to its content. Constraints can then help determine how that component behaves within its parent.
Combining constraints with Auto Layout and Hug contents can create highly flexible components.
Fill container allows a child layer to occupy available space within an Auto Layout parent. This is different from traditional constraints but often works together with responsive layout concepts.
For example, a search input may fill the remaining width while an action button maintains its own width.
Constraints can be useful when designing reusable components. They help component layers maintain predictable relationships when the component instance changes size.
Examples include:
Variants can represent different component states such as Default, Hover, Active, Disabled, and Loading. Constraints can help maintain consistent positioning within each variant.
Button Component
|
+-- Default
+-- Hover
+-- Active
+-- Disabled
+-- Loading
Responsive cards can use constraints for image placement, text positioning, and action alignment.
| Element | Possible Constraint |
|---|---|
| Image | Left + Right |
| Title | Left + Top |
| Description | Left + Right |
| Price | Left + Bottom |
| Button | Right + Bottom |
Dashboards contain many panels, cards, charts, filters, and navigation controls. Constraints can help keep these elements aligned as the dashboard frame changes.
+------------------------------------------------+
| Header |
+------------------+-----------------------------+
| Sidebar | Dashboard Content |
| | +---------+ +---------+ |
| | | Card 1 | | Card 2 | |
| | +---------+ +---------+ |
| | +-------------------------+ |
| | | Chart | |
| | +-------------------------+ |
+------------------+-----------------------------+
Mobile screens have different widths and heights across devices. Constraints can help maintain the position of fixed UI elements such as headers, bottom navigation, floating buttons, and content areas.
For example, a floating action button can remain attached to the bottom-right corner regardless of screen height.
Tablet designs have more available space than mobile layouts. Constraints can help maintain alignment when a tablet frame changes between portrait and landscape orientations.
Desktop layouts often expand significantly in width. Elements can use left, right, center, or left-and-right constraints depending on their intended behavior.
Landing pages commonly contain a hero section, navigation, call-to-action buttons, images, feature sections, testimonials, and footer content.
Constraints can help keep important elements aligned while the page frame changes size.
A hero section can contain a heading, description, CTA button, and illustration. The text may remain left aligned while the illustration stays attached to the right side.
+------------------------------------------------+
| Heading [Image] |
| Description [Image] |
| [Get Started] [Image] |
+------------------------------------------------+
For a navigation header, the logo can remain left aligned while actions remain right aligned.
A login form can be centered inside a frame using Center constraints. This ensures that the form remains visually centered when the screen size changes.
+--------------------------------+
| |
| Login Form |
| [ Email ] |
| [ Password ] |
| [ Login ] |
| |
+--------------------------------+
E-commerce interfaces use constraints for product cards, filters, product images, pricing, buttons, and shopping cart controls.
For example, the product image can remain centered while the purchase button stays aligned to the bottom-right area.
Profile screens can use constraints to keep avatars, names, edit buttons, and profile information aligned relative to the parent frame.
Icons can be constrained to maintain their relationship with nearby content. For example, a close icon in a modal can remain attached to the top-right corner.
A close button inside a modal is commonly positioned using Right and Top constraints.
+---------------------------+
| [ X ] |
| |
| Modal Content |
| |
+---------------------------+
Alert messages can use Left and Right constraints so the alert container adapts to different widths while maintaining consistent side spacing.
Input fields often need to expand horizontally with their parent container. Left and Right constraints are useful when a fixed side margin should be maintained.
Tables can use constraints for columns and action buttons. However, for complex dynamic tables, Auto Layout and component structures are usually more appropriate.
List items can use constraints for leading icons, text areas, trailing actions, and separators.
+--------------------------------+
| [Icon] Item Name [ > ] |
|--------------------------------|
| [Icon] Item Name [ > ] |
|--------------------------------|
| [Icon] Item Name [ > ] |
+--------------------------------+
Elements such as dividers, search bars, content containers, and banners may use Left and Right constraints to occupy the available horizontal space.
Some elements should maintain their width even when the parent changes. Examples include icon buttons, avatars, badges, and compact action controls.
Use appropriate constraints and sizing settings so these elements do not unintentionally stretch.
Background shapes and containers may use Left and Right as well as Top and Bottom relationships when they need to cover the entire parent area.
Constraints are useful for layered designs where one element sits above another. Examples include badges over images, favorite icons over product cards, and play buttons over video thumbnails.
Constraints do not replace good layer organization. A clean layer hierarchy makes it easier to understand how elements should respond to their parent containers.
Frame
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Login Button
├── Content
│ ├── Heading
│ ├── Image
│ └── Button
└── Footer
Alignment and constraints work together. First establish proper alignment, then define how that alignment should behave when the parent changes size.
Constraints determine relationships with parent edges, while spacing determines the visual distance between elements. A good responsive design uses both concepts together.
Figma does not use a direct CSS-style margin property for ordinary layers. Instead, spacing from parent edges can be represented through positioning, Auto Layout padding, gaps, constraints, and layout structures.
For example, a layer constrained to the left can maintain its distance from the parent's left edge.
Padding is primarily controlled through Auto Layout. Constraints can then determine how the overall container behaves relative to its parent.
For example:
Outer Frame
+--------------------------------+
| Padding |
| +------------------------+ |
| | Content | |
| +------------------------+ |
| |
+--------------------------------+
Layout grids provide visual guides for columns, rows, and margins. Constraints determine how individual elements respond to parent resizing.
Using grids and constraints together creates more structured responsive designs.
In a column-based layout, elements can be positioned relative to the content boundaries. This helps maintain consistent alignment across sections.
Rows can help organize content vertically while constraints control how selected layers behave when the parent frame changes height.
Responsive images need careful consideration because stretching an image incorrectly can distort the design. Use proportional scaling or appropriate sizing behavior depending on the design requirement.
Background images may need to cover the entire container while maintaining an intended visual crop. In these cases, image fill settings, cropping, and frame structure should be considered along with constraints.
Avatars usually have fixed dimensions. Their position can be constrained to the left, right, top, or center depending on the component design.
Badges placed over cards or images often need to stay attached to a particular corner. For example, a sale badge can use Top and Right positioning.
A notification badge attached to a bell icon can be positioned relative to the icon container so it remains correctly placed when the surrounding component changes.
Responsive navigation often changes structure between desktop and mobile. Constraints can help maintain desktop relationships, while separate responsive frames or component variants can handle major structural changes.
Design systems benefit from predictable responsive behavior. Constraints can be incorporated into reusable components to ensure that instances behave consistently.
When creating a reusable component, test it at multiple widths. A component should maintain logical relationships between its internal elements.
Component
+-----------------------------+
| Title [Icon]|
| |
| Description |
| |
| [Primary Action] |
+-----------------------------+
Responsive components combine constraints, Auto Layout, sizing behavior, and component properties. This combination allows designers to create reusable elements that adapt to different contexts.
When converting a desktop design into a mobile design, constraints can help identify which elements should stay attached to edges and which should remain centered or flexible.
Desktop
[Logo] [Navigation Links] [Login]
Mobile
[Logo] [Menu]
For major structural changes, use responsive variants or separate layouts rather than depending only on constraints.
Mobile and tablet interfaces may switch between portrait and landscape orientations. Constraints help maintain relationships when the frame dimensions change.
Constraints can make prototype screens easier to maintain across different frame sizes. When combined with appropriate frame and component structures, they help create realistic responsive demonstrations.
Well-structured constraints communicate responsive intentions to developers. A developer can better understand whether an element should remain attached to an edge, stay centered, or expand with its container.
| Feature | Best Used For |
|---|---|
| Constraints | Relationship between a layer and its parent |
| Auto Layout | Dynamic arrangement and sizing of child elements |
| Components | Reusable UI elements |
| Variants | Different states or versions of components |
| Layout Grids | Consistent page structure and alignment |
Create a login screen with a centered form.
Create a header containing a logo, navigation, and login button.
Create a dashboard with a sidebar, header, statistics cards, and chart.
Create a product card containing an image, title, price, rating, and purchase button.
+-------------------------------+
| Product Image |
|-------------------------------|
| Wireless Headphones |
| ★★★★★ |
| ₹2,499 |
| [Buy Now] |
+-------------------------------+
Use constraints where appropriate and use Auto Layout for dynamic content spacing.
Create a mobile screen with a bottom navigation bar containing Home, Search, Cart, and Profile.
Create a modal dialog that remains centered when the parent frame changes size.
Resize the parent frame and verify that the modal remains centered.
Constraints are an important part of responsive design, but they are not a complete responsive design system by themselves. Complex interfaces may require Auto Layout, components, variants, layout grids, responsive frames, and careful content sizing.
The best results come from combining the appropriate Figma layout features rather than depending on a single feature.
For modern Figma design workflows, use Auto Layout for content-driven structures and constraints for parent-relative positioning where necessary.
Responsive UI
|
+-- Auto Layout
| +-- Spacing
| +-- Alignment
| +-- Sizing
|
+-- Constraints
| +-- Parent Relationship
| +-- Edge Position
|
+-- Components
+-- Reusability
+-- Variants
Answer: Constraints in Figma define how a layer should behave relative to its parent frame when the parent is resized. They control horizontal and vertical positioning and can help maintain responsive relationships.
Answer: Common horizontal constraint options include Left, Right, Left and Right, Center, and Scale.
Answer: Common vertical options include Top, Bottom, Top and Bottom, Center, and Scale.
Answer: Constraints define how a layer behaves relative to its parent when the parent changes size, while Auto Layout controls the arrangement, spacing, alignment, and sizing behavior of multiple layers within a layout.
Answer: Yes. Constraints are useful for responsive design because they allow elements to maintain relationships with their parent containers when the container size changes. However, complex responsive interfaces usually require Auto Layout and components as well.
Answer: Center constraints are useful when an element should remain centered relative to its parent, such as modal dialogs, empty-state messages, centered illustrations, and certain buttons.
Answer: Left and Right constraints are useful when an element should maintain relationships with both horizontal edges and adapt to changes in the parent width, such as input fields, search bars, dividers, and flexible containers.
Answer: Right and Bottom constraints are useful for elements that should remain attached to the lower-right area of a container, such as floating action buttons and corner action controls.
| Concept | Meaning |
|---|---|
| Constraints | Rules controlling layer behavior relative to its parent |
| Left | Keeps layer related to left edge |
| Right | Keeps layer related to right edge |
| Top | Keeps layer related to top edge |
| Bottom | Keeps layer related to bottom edge |
| Center | Keeps layer centered |
| Scale | Maintains proportional resizing behavior |
| Left + Right | Supports flexible horizontal behavior |
| Top + Bottom | Supports flexible vertical behavior |
| Auto Layout | Controls dynamic content arrangement and sizing |
Constraints are an essential Figma feature for controlling how UI elements respond when their parent frame changes size. They help maintain relationships between elements and their containers and are particularly useful for responsive interfaces.
Understanding Left, Right, Top, Bottom, Center, Scale, and combined constraint behaviors gives designers greater control over responsive positioning. When constraints are combined with Auto Layout, components, variants, layout grids, and a consistent design system, designers can build flexible and professional interfaces for websites, mobile applications, dashboards, and product experiences.
To develop practical Figma UI/UX skills through hands-on projects and industry-oriented training, visit JustAcademy Figma Training and Register for Figma Course Demo.
